<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    // document.querySelector("input").checked = false
    // document.querySelector("input").setAttribute("checked",true);
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: true,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,  //是否被勾选   可以不入数据库
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    console.log(data);
    // forEach()
    // I/O : I :input  O: output
    var listEle = document.querySelector("#list");
    function renderDom(arr) {
      listEle.innerHTML = "";
      arr.forEach(function (item, key) {
        var liEle = document.createElement("li");
        // var checkStr = item.checked?'checked':'';
        liEle.innerHTML = `<input type="checkbox" ${item.checked ? 'checked' : ''} />
          <span>${item.title}</span>
          ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>`;
        listEle.appendChild(liEle);

        // 点击勾选按钮的触发 ；
        var checkEle = liEle.querySelector("input");
        checkEle.onclick = function(){
          // console.log(123);
          // 1.改变原本的data里的checked值和勾选的值一致 
          // 2.校验是否需要勾选上全选按钮；
          data[key].checked = this.checked;
          // console.log(data);
         var res =  isCheckAll();//检验是否需要全选；
        //  console.log(res);
          document.querySelector("#checkAll").checked = res;
        }



        // 删除功能
        var delEle = liEle.querySelector(".remove");
        delEle.onclick = function () {
          // console.log("点击了删除");
          //先删除数据 然后再渲染视图 ；
          // console.log(key);
          data.splice(key, 1);
          // console.log(data);
          renderDom(data);
        }

        // 收藏和取消收藏功能；先更改数据  在渲染视图 ；
        // 点击收藏按钮 
        var collectEle = liEle.querySelector(".collect");
        // console.log(collectEle)
        // if (collectEle) {
        //   collectEle.onclick = function () {
        //     console.log("点击了收藏按钮");
        //   }
        // }

        collectEle && (collectEle.onclick = function () {
          // console.log("点击了收藏按钮");
          // console.log(key);
          data[key].collect = true;
          // console.log(data);
          renderDom(data);
        })

        // 点击我取消收藏
        var cancelCollectEle = liEle.querySelector(".cancelCollect");
        cancelCollectEle && (cancelCollectEle.onclick = function () {
          // console.log("点击了收藏按钮");
          // console.log(key);
          data[key].collect = false;
          // console.log(data);
          renderDom(data);
        })


      })
    }
    renderDom(data);



  // 删除功能 ；先删除数据 然后再渲染视图 ；

  // 全选和非全选 ；
  // 点击全选的时候 然上面的选择状态和 勾选状态一致；
  // 获取全选按钮
    var checkAllEle = document.querySelector("#checkAll");
    checkAllEle.onclick = function(){
      // console.log(this.checked);
      // console.log(this);
      var that = this;
      data.forEach(function(item){
        // console.log(that);
        item.checked = that.checked;
      })
      // console.log(data);
      renderDom(data);
    }

    // 1.什么时候需要判断 底下的全选是否勾选？？
    // 2.如何判断全选获取非全选 ？？

// 用来判断是否全选了；
    function isCheckAll(){
        // var num = 0;
        // data.forEach(function(item){
        //   if(item.checked){  // 记录每个checked勾选为true的时候
        //      num++;
        //   }
        // })
        // if(num==data.length){
        //     // console.log("证明需要全选")
        //     return true;
        // }else{
        //   return false;
        // }

          // var flag = true;  // 假设需要全选；
          // data.forEach(function(item){
          //   flag = flag && item.checked;
          // })
          // return flag;
         return data.every(function(item){
            return item.checked;
          })
    }

  // const isCheckAll = ()=>data.every(item=>item.checked);


  // 删除指定的勾选的音乐 ；
  // 获取删除按钮 
var remvoeEle = document.querySelector("#remove");
remvoeEle.onclick = function(){
  // 在 data 数组里筛选出 checked 为false的所有数据  放在res数组 ；
    var res = data.filter(function(item){
        return !item.checked;
    })
    data = res;
    // console.log(res);
    renderDom(res);
}


// 添加音乐列表 
// 获取添加按钮 绑定点击事件；
var addBtn = document.querySelector("#add");
var newInfoEle = document.querySelector("#newInfo");
addBtn.onclick = function(){
  var val = newInfoEle.value;
  // console.log(val);
  // 数据驱动 ，先在数据里添加 内容 然后再渲染；
var id = data[data.length-1].id+1;
  var obj = {
        id: id,
        title: val,
        checked: false,  //是否被勾选   可以不入数据库
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
      // console.log(obj);
      data.push(obj);
      // console.log(data);
      renderDom(data);
}


  </script>
</body>

</html>